<template>
	<view>
		<uni-popup ref="popup" :safe-area="false">
			<view class="bottom-popup">
				<view class="popup-title d-flex psr a-center j-center">
					<view class="text-title">BMI对照表</view>
					<image @tap="close" class="title-icon" src="@/static/image/close.png"></image>
				</view>
				<view class="popup-row">
					<view class="popup-row-describe">标准BMI指数对于一个人的体重健康有基础的指导，但现实中，出于对体型的追求，胖瘦的定义也各不相同，请参照以下BMI数据选择适用人群。</view>
					<view class="data-info">
						<view class="data-info-title d-flex a-center j-between">
							<view class="d-flex a-center">
								<view class="info-title-left"></view>
								<view class="info-title-text">BMI指数</view>
							</view>
							<view class="d-flex">
								<view class="info-title-number" :style="{ color: fontColor }">{{BMI}}</view>
								<view class="info-title-unit" :style="{ color: fontColor }">{{BMITip(BMI)}}</view>
							</view>
						</view>
						<view class="data-info-chart d-flex j-between">
							<view class="info-chart-1">
								<view class="chart-mark" v-if="BMI<18.5" :style="{ borderTopColor: '#65E7E8' , left: BMIletf(BMI) + '%' }"></view>
								<view class="chart-1-v"></view>
								<view class="info-chart-describe">&lt;18.5偏瘦</view>
							</view>
							<view class="info-chart-2">
								<view class="chart-mark" v-if="BMI>=18.5&&BMI<=23.9" :style="{ borderTopColor: '#7FF0AC' , left: BMIletf(BMI) + '%' }"></view>
								<view class="chart-2-v"></view>
								<view class="info-chart-describe">18.5-23.9正常</view>
							</view>
							<view class="info-chart-3">
								<view class="chart-mark" v-if="BMI>=24&&BMI<=29.9" :style="{ borderTopColor: '#FFD401' , left: BMIletf(BMI) + '%' }"></view>
								<view class="chart-3-v"></view>
								<view class="info-chart-describe">24-29.9偏重</view>
							</view>
							<view class="info-chart-4">
								<view class="chart-mark" v-if="BMI>=30&&BMI<=34.9" :style="{ borderTopColor: '#FF9858' , left: BMIletf(BMI) + '%' }"></view>
								<view class="chart-4-v"></view>
								<view class="info-chart-describe">30-34.9超重</view>
							</view>
							<view class="info-chart-5">
								<view class="chart-mark" v-if="BMI>34.9" :style="{ borderTopColor: '#FF6B4F' , left: BMIletf(BMI) + '%' }"></view>
								<view class="chart-5-v"></view>
								<view class="info-chart-describe">&gt;34.9严重超重</view>
							</view>
						</view>
						<view class="data-info-algorit">BMI体质指数=体重(千克)/身高(米)的平方</view>
					</view>
					<view class="data-info">
						<view class="data-info-title d-flex a-center j-between">
							<view class="d-flex a-center">
								<view class="info-title-left"></view>
								<view class="info-title-text">身高</view>
							</view>
						</view>
					</view>
					<!--身高滑块-->
					<transverse unit="cm" :init="160" :min="100" :max="230" :decimal="0" :interval="1" :advance="10" @onResult="getStature"></transverse>
					<view class="data-info">
						<view class="data-info-title d-flex a-center j-between">
							<view class="d-flex a-center">
								<view class="info-title-left"></view>
								<view class="info-title-text">体重</view>
							</view>
						</view>
					</view>
					<!--身高滑块-->
					<transverse unit="kg" :init="60" :min="30" :max="150" :decimal="1" :interval="0.5" :advance="10" @onResult="getWeight"></transverse>
				</view>
			</view>
		</uni-popup>
	</view>
</template>
<script setup lang="ts">
import { ref } from "vue";
import transverse from "@/components/transverse.vue";
import BigNumber from "bignumber.js";

const popup = ref()
const open = () => {
	popup.value.open("bottom")
}

const close = () => {
	popup.value.close()
}
const BMI = ref(0);//体质指数
const fontColor = ref("#FF9858");
const BMITip = (index:number) => {
	if(index<18.5){
		fontColor.value = "#65E7E8";
		return "偏瘦";
	}
	if(index>=18.5&&index<=23.9){
		fontColor.value = "#7FF0AC";
		return "正常";
	}
	if(index>=24&&index<=29.9){
		fontColor.value = "#FFD401";
		return "偏重";
	}
	if(index>=30&&index<=34.9){
		fontColor.value = "#FF9858";
		return "超重";
	}
	if(index>34.9){
		fontColor.value = "#FF6B4F";
		return "严重超重";
	}
}
const BMIletf = (index:number) => {
	let min = 0;
	let max = 0;
	if(index<18.5){
		min = 13.4
		max = 18.4;
	}
	if(index>=18.5&&index<=23.9){
		min = 18.5
		max = 23.9;
	}
	if(index>=24&&index<=29.9){
		min = 24
		max = 29.9;
	}
	if(index>=30&&index<=34.9){
		min =30
		max = 34.9;
	}
	if(index>34.9){
		min =34.9
		max = 39.9;
	}
	let val =  Number(Math.round(((index - min) / (max - min) * 100)));
	if(val<0)val = 0;
	if(val>100)val = 100;
	return val;
}
let stature = 160;
const getStature = (res:number) => {
	stature = res;
	countBMI();
}
let weight = 60;
const getWeight = (res:number) => {
	weight = res;
	countBMI();
}
const countBMI = () => {
	let m = new BigNumber(stature).div(new BigNumber(100));
	BMI.value = Number(new BigNumber(weight).div(m.times(m)).toNumber().toFixed(1));
}
defineExpose({
  open,
  close
});
</script>
<style lang="scss" scoped>

.bottom-popup{
	background: #FFFFFF;
	border-radius: 20rpx 20rpx 0rpx 0rpx;
	padding-bottom: 100rpx;
	.popup-title{
		height: 100rpx;
		.title-text{
			position:absolute;
			top:34rpx;
			left:50rpx;
			height: 32rpx;
			width: 234rpx;
		}
		.title-icon{
			position:absolute;
			top:32rpx;
			right: 30rpx;
			
			width: 36rpx;
			height: 36rpx;
		}
	}
	.popup-show{
		justify-content: space-between;
		height: 80rpx;
		padding: 0 30rpx 0 30rpx;
		.show-text{
			font-size: 32rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
		}
		
	}
	.popup-row{
		.popup-row-describe{
			padding: 0 30rpx;
			font-size: 30rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
		}
		.data-info{
			padding: 0 50rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
			.data-info-title{
				height: 100rpx;
				position: relative;
				.info-title-left{
					margin-left: -3rpx;
					width: 6rpx;
					height: 34rpx;
					background: #1DC691;
					border-radius: 3rpx;
				}
				.info-title-text{
					position: relative;
					padding-left: 9rpx;
					font-size: 34rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 600;
					color: #333333;
				}
				.info-title-number{
					font-size: 50rpx;
					font-family: 'din',DINAlternate-Bold, DINAlternate;
					font-weight: bold;
				}
				.info-title-unit{
					padding-left: 10rpx;
					padding-top: 20rpx;
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
				}
			}
			.data-info-chart{
				padding-top: 40rpx;
				padding-bottom: 10rpx;
				.info-chart-1{
					position: relative;
					width: 110rpx;
					.chart-1-v{
						
						height: 24rpx;
						background: #65E7E8;
						border-radius: 8rpx;
					}
				}
				.info-chart-2{
					position: relative;
					width: 140rpx;
					.chart-2-v{
						width: 100%;
						height: 24rpx;
						background: #7FF0AC;
						border-radius: 8rpx;
					}
				}
				.info-chart-3{
					position: relative;
					width: 110rpx;
					.chart-3-v{
						width: 100%;
						height: 24rpx;
						background: #FFD401;
						border-radius: 8rpx;
					}
				}
				.info-chart-4{
					position: relative;
					width: 110rpx;
					.chart-4-v{
						width: 100%;
						height: 24rpx;
						background: #FF9858;
						border-radius: 8rpx;
					}
				}
				.info-chart-5{
					position: relative;
					width: 140rpx;
					.chart-5-v{
						width: 100%;
						height: 24rpx;
						background: #FF6B4F;
						border-radius: 8rpx;
					}
				}
				.chart-mark{
					position: absolute;
					top: -30rpx;
					width: 0;  
					height: 0;  
					transform: translateX(-50%);
					border-left: 10rpx solid transparent;   /* 左边框 */  
					border-right: 10rpx solid transparent;  /* 右边框 */  
					border-top-width: 15rpx;
					border-top-style: solid;
				}
				.info-chart-describe{
					text-align: center;
					padding-top: 16rpx;
					font-size: 18rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #666666;
				}
			}
			.data-info-algorit{
				padding-top: 10rpx;
				padding-bottom: 20rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
			}
		}
	}
}
</style>